<template>
  <div>
    <el-row style="margin: 10px 0 10px 0" type="flex" justify="start">
      <el-col span="auto" style="margin-right: 5px">
        <el-avatar :src="poster.imgUrl" :size="45"></el-avatar>
      </el-col>
      <el-col span="auto">
        <el-row>
          <el-tag effect="dark" size="mini" :type="postTypeTag[post.type]" style="margin-right: 10px">{{postType[post.type]}}</el-tag>
          <span style="font-weight: bold" v-html="poster.nickname"></span>
        </el-row>
        <el-row class="box">
          <span style="margin-right: 5px">{{post.gmtCreate}}</span>
          <i class="el-icon-location-outline"></i>
          <span v-html="post.address"></span>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <span v-html="post.title"></span>
    </el-row>
    <el-row class="post-content">{{post.detail}}</el-row>
    <el-row>
      <el-avatar :src="postImage" shape="square" :size="140" fit="fit" v-show="hasImg"></el-avatar>
    </el-row>
    <el-row class="box">
      <el-tag style="margin-right: 5px">{{post.itemTypeName}}</el-tag>
      <el-button type="text" size="mini" @click="forMoreDetail">查看详情</el-button>
      <el-divider></el-divider>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PostAbstract",
  props: {
    post: Object
  },
  data() {
    return {
      poster: this.post.fromUser,
      postImage: '',
      hasImg: false,
      postType: ['寻物', '认领'],
      postTypeTag: ['success', '']
    }
  },
  methods: {
    forMoreDetail() {
      this.$router.push({
        name: 'post',
        query: {
          id: this.post.id,
          from: 'all'
        }
      })
    }
  },
  created() {
    if(this.post.address === '') {
      this.post.address = '未知'
    }
    if(this.post.postImageList !== null) {
      this.hasImg = true
      this.postImage = this.post.postImageList[0].imgUrl
    } else {
      this.hasImg = false
    }
  }
}
</script>

<style scoped>
.box {
  margin-top: 6px;
  font-size: 12px;
  color: #727272;
}

.post-content {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #8c939d
}
</style>
